<template>
	<view>
		<view class="page">
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon"   @click="back">
				<image class="img"
					src=""
					mode="aspectFill"></image>
			</view>
			<view class="top-title" >{{title}}</view>
		</view>
		<view class="body" :style="`margin-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="flex_r fa_c avatar" style="background-color: none;" >
				<view class="avatar-img">
					<image class="img" :src="info.userImg" mode="aspectFill"></image>
				</view>
				<view class="" style="margin-left:10rpx;">
					{{info.userName}}
				</view>
			</view>
			<view class="text_34 item" style="padding:20rpx;">
				{{info.destination}}
			</view>
			<view class="row-img">
				<image clss="img" mode="aspectFill" :src="info.userImg"></image>
			</view>
			<view class="color__ item">
				{{info.tag}}
			</view>
			<view class="color__ item">
				行程时间：{{info.reachTime}}
			</view>
			<view class="color__ item">
				出发时间：{{info.setOutTime}}
			</view>
			<view class="color__ item">
				出行方式：{{info.travel}}
			</view>
		</view>
		<view class="button" @click="goUser">我感兴趣</view>
		</view>
	</view>
</template>

<script>
	import Mpay from '@/components/m-pay/m-pay.vue';
	import {to} from '@/utils/index.js';
	export default {
		components: {
			Mpay
		},
		data() {
			return {
				title: '',
				info: {}
			}
		},
		onLoad(option) {
		},
		onShow(option){
			this.getInfo();
			this.title = '旅行'
		},
		methods: {
			to,
			back(){
				uni.navigateBack()
			},
			goUser(){
				to('/pages/m-pages/m-user-info/index?userid='+this.info.userId)
			},
			async getInfo(){
				this.info = uni.getStorageSync("agree-item")
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		// background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding:10rpx;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
	}
	.body{
		padding:20rpx;
		padding-top:80rpx;
		.avatar{
			.avatar-img{
				width:80rpx;
				height:80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.item{
			margin-top:10rpx;
		}
	}
	
	.button{
		background-color: #ff301e;
		color:#fff;
		height:60rpx;
		padding: 20rpx;
		font-size:38rpx;
		line-height: 60rpx;
		width:100%;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		bottom:0rpx;
		transform: translateY(-20rpx);
	}
		
</style>